<!--

    Copyright (c) 2012, Mayocat <hello@mayocat.org>

    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.

-->
<h1 class="small" ng-show="!isNew()">{{'product.title.editCollection' | translate}}</h1>
<h1 class="small" ng-show="isNew()">{{'product.title.newCollection' | translate}}</h1>

<div class="loading" ng-show="!collection.slug && !isNew()"></div>
<form name="collectionForm" ng-show="collection.slug || isNew()">
    <article class="entity">

        <div>

            <!-- Title -->
            <h1>
                <input type="text" class="title" ng-model="localizedCollection.title" placeholder="{{'product.placeholder.collectionTitle' | translate}}" localized required/>
            </h1>

            <!-- Description -->
            <div ng-show="!isNew()">
                <label>{{'product.misc.description' | translate}}</label>
                <textarea rows="10" ng-model="localizedCollection.description" localized/>
            </div>

            <!-- Images -->
            <div class="block" ng-if="!isNew()">
                <h3>{{'image.title.images' | translate:getTranslationProperties()}}</h3>

                <upload-list id="'image-gallery'"></upload-list>

                <image-list entity="collection"
                            sortable-options="getImagesSortableOptions()"
                            on-select-feature="selectFeatureImage(image)"
                            on-edit="editImage(image)"
                            on-remove="removeImage(image)">
                </image-list>

                <image-upload ng-if="!isNew()"
                              upload-uri="{{getImageUploadUri()}}"
                              drop-text="'upload.explanation.dropCollection' | translate:getTranslationProperties()"
                              target="image-gallery"
                              id="'image-gallery'">
                </image-upload>
            </div>
        </div>

    </article>
    <aside>
        <div class="buttons">
            <div ng-show="isNew()">
                <!-- Create new product -->
                <div class="hasLoading">
                    <button ng-disabled="collectionForm.$invalid" ng-click="updateCollection()" class="btn btn-large btn-primary">
                        {{'entity.action.create' | translate}}
                    </button>
                    <span ng-class="{'loading': isSaving}"></span>
                </div>
            </div>
            <div ng-show="!isNew()">
                <!-- Update collection -->
                <div class="hasLoading">
                    <button ng-disabled="collectionForm.$invalid" ng-click="updateCollection()" class="btn btn-large btn-primary">
                        {{'entity.action.update' | translate}}
                    </button>
                    <span ng-class="{'loading': isSaving}"></span>
                </div>
            </div>

        </div>

        <p/>

        <div class="uri" ng-show="!isNew()">
            <a href="{{editedLocalePrefix}}/collections/{{collection.slug}}" target="_new">
                {{editedLocalePrefix}}/collections/{{collection.slug}}
            </a>
        </div>

        <div class="block delete" ng-show="!isNew()">
            <small class="click-me" ng-click="confirmDeletion()">
                {{'product.action.deleteCollection' | translate}}
            </small>
        </div>
    </aside>
</form>
